<template>
	<view style="font-size:28rpx">
		<u-navbar :autoBack="true" leftIconColor="#ffffff" title="个人信息" :placeholder="true" bgColor="#3ACD90"  :titleStyle="{ color: '#FFFFFF', fontSize: '30rpx' }"></u-navbar>
		
		<view style="background-color: #ffffff;">
			<view class="mtlr30 cell-box" >
				<view>
					商务姓名
				</view>
				<view style="color:#7D7D7D">
					{{userInfo.real_name}}
				</view>
				
			</view>
			<view class="vertical-divider"></view>
			
			<view class="mtlr30 cell-box;">
				<view>
					绑定手机号
				</view>
				<view style="color:#7D7D7D;display: flex;">
					<view v-if="phoneMaskShow == 'eye-off'">
						{{ maskPhone }}
					</view>
					<view v-else> 
						{{userInfo.phone}}
					</view>
					
					<view @click="clickPhoneMask">
						<u-icon
								slot="right"
								:name="phoneMaskShow"
						></u-icon>
					</view>
					
				</view>
				
			</view>
			<view class="vertical-divider"></view>
			
			<view class="mtlr30 cell-box" >
				<view>
					身份证号
				</view>
				<view style="color:#7D7D7D;display: flex;" >
					<view v-if="cardMaskShow == 'eye-off'">
						{{ maskCard }}
					</view>
					<view v-else>
						{{userInfo.card_id}}
					</view>
					<view @click="clickCardMask">
						<u-icon
								slot="right"
								:name="cardMaskShow"
						></u-icon>
					</view>
				</view>
				
			</view>
			<view class="vertical-divider"></view>
			
			<!-- <view class="mtlr30 cell-box" >
				<view>
					开户行
				</view>
				<view style="color:#7D7D7D;display: flex;" >
					<view>

					</view>
					
				</view>
				
			</view>
			<view class="vertical-divider"></view> -->
			
			<!-- <view class="mtlr30 cell-box" >
				<view>
					银行账户
				</view>
				<view style="color:#7D7D7D;display: flex;" >
					<view>

					</view>
					
				</view>
				
			</view>
			<view class="vertical-divider"></view> -->
			
		</view>
		
		<!-- <view style="margin-top: 60rpx;" class="mtlr30">
			<u-button type="primary" text="修改认证信息" color="#3ACD90" size="large"></u-button>
		</view> -->
	</view>
</template>

<script>
export default{
	data(){
		return{
			userInfo:uni.getStorageSync('userinfo'),
			
			phoneMaskShow:"eye-off",
			cardMaskShow:"eye-off"
		}
	},
	computed:{
		maskPhone(){
			return this.userInfo.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1*****$2');
		},
		maskCard(){
			return this.userInfo.card_id.replace(/(\d{4})\d{10}(\d{4})/, '$1*****$2');
			
		}
	},
	methods:{
		clickPhoneMask(){
			if( this.phoneMaskShow == "eye-fill"  ){
				this.phoneMaskShow = "eye-off"
			}else{
				this.phoneMaskShow = "eye-fill"
			}
		},
		clickCardMask(){
			if( this.cardMaskShow == "eye-fill"  ){
				this.cardMaskShow = "eye-off"
			}else{
				this.cardMaskShow = "eye-fill"

			}
		}
		
	}
}
</script>

<style scoped>
	.cell-box-first{
		padding: 20rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.cell-box{
		padding: 40rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.vertical-divider {
		width: 100%;
		height: 2rpx;
		background-color: #D8D8D8;
	
	}
</style>